<template>
	<view class="container">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<image style="width: 100%; height: 400rpx" mode="aspectFill" :src="src">
			</image>
			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>
		<view class="main">
			<view class="title">
				<view class="store">{{ view.store }}</view>
				<view class="info">
					<text>歡迎您：</text>
					<text>{{ view.user.mobile?view.user.mobile:view.user.user.mobile }} |
					</text>
					<text>{{ view.user.mobile?view.user.level === 0 ? '普通會員':'' : view.user.user.level === 0 ? '普通會員' : '' }}
						| </text>
					<text @click="logout">退出</text>
				</view>
			</view>
			<scroll-view scroll-y="true" @scrolltolower="scroll" class="scroll_Y">
				<view class="order_item" v-for="item in orderList" :key="item.id">
					<view class="top_image" @click="toDetails(item.id)">
						<view class="room_image">
							<up-image :src="item.room_image" :lazy-load="true"></up-image>
						</view>
						<view class="top_info">
							<view class="room_name">{{item.room_name}}</view>
							<view class="order_no">{{item.order_no}}</view>
						</view>
						<view class="order_status" :style="{background:setBackground(item.status)}">
							{{setOrderStatus(item.status)}}
						</view>
					</view>
					<view class="time" @click="toDetails(item.id)">
						<view class="time_box">
							<view class="">{{orderStartDate(item.start)}}</view>
							<view class="">{{orderStartTime(item.start)}}</view>
						</view>
						<view class="time_box">
							<view class="">時長</view>
							<view class="">{{orderDuration(item.start)}}</view>
						</view>
						<view class="time_box">
							<view class="">{{orderEndDate(item.start)}}</view>
							<view class="">{{orderEndTime(item.start)}}</view>
						</view>
					</view>
					<view class="order_price">支付金額：<text style="color: #FA533D;">${{item.total_price}}</text> </view>
					<view class="create_time">下單時間：{{item.time}}</view>
					<view class="operate_btn" v-if="item.status !== 31 || item.status !== 41">
						<u-button @click="openPaymentPopup(item)" v-if="item.status==10" text="立即付款"
							class="custom-style1"></u-button>
						<u-button @click="openDelModal(item)" v-if="item.status==10" text="刪除"
							class="custom-style3"></u-button>
						<u-button @click="openCancelModal(item)" v-if="item.status==30" text="退款"
							class="custom-style2"></u-button>
						<!-- <u-button v-if="item.status==33" text="延長時間" class="custom-style4"></u-button> -->
					</view>
				</view>
				<view v-if="!flag" style="text-align: center;margin: 20rpx;">到底啦~</view>
			</scroll-view>
		</view>

		<!-- 刪除 -->
		<u-modal :show="showDelModal" title="確認刪除訂單" confirmText="確認" @confirm="confirmDel" @cancel="showDelModal=false"
			@close="showDelModal=false" :showCancelButton="true" :closeOnClickOverlay="true"></u-modal>

		<!-- 退款 -->
		<u-modal :show="showCancelModal" title="確認退款" confirmText="確認" @confirm="confirmCancel"
			@cancel="showCancelModal=false" @close="showCancelModal=false" :showCancelButton="true"
			:closeOnClickOverlay="true"></u-modal>

		<!-- 立即支付 -->
		<u-popup round="10" :show="showPaymentPopup" @close="showPaymentPopup = false" :closeOnClickOverlay="true">
			<view class="payment_box">
				<u-radio-group @change="changePayment" v-model="radiovalue" placement="column">
					<u-radio v-for="(item,index) in paymentList" :name="item.name" :key="index" :label="item.name"
						:customStyle="{margin:'20rpx auto'}" activeColor="#39B19D" labelSize="20" size="20"
						iconSize="20"></u-radio>
				</u-radio-group>
				<view class="btns">
					<u-button @click="showPaymentPopup = false" class="custom-style1" text="取消"></u-button>
					<u-button @click="confirmPayment" class="custom-style2" text="確認"></u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import {
		getOrderList,
		cancelOrder,
		orderDel,
		getOrderCode,
		orderPay,
		getUserStoreInfo
	} from '@/api/order.js'

	export default {
		data() {
			return {
				statusBarHeight: 0,
				src: '',
				view: {
					user: {},
					store: '',
				},
				orderList: [],
				flag: true,
				page: 1,
				showDelModal: false,
				orderInfo: null,
				showCancelModal: false,
				showPaymentPopup: false,
				paymentList: [{
						name: '現金支付',
						disabled: false
					},
					{
						name: '餘額支付',
						disabled: false
					}
				],
				radiovalue: '',
				userStoreInfo: {},
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.setSwiperImg();
			const userOptions = JSON.parse(uni.getStorageSync('userOptions'));
			const equipmentOptions = JSON.parse(uni.getStorageSync('equipmentOptions'));
			this.view = {
				user: userOptions,
				store: equipmentOptions.name
			};
		},
		onShow() {
			this.flag = true
			this.page = 1
			this.getOrderListFn(this.page)
		},
		methods: {
			setSwiperImg() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				this.src = baseURL + equipmentOptions.image3
			},
			back() {
				uni.reLaunch({
					url: '/pages/shop/shop'
				})
			},
			logout() {
				uni.removeStorageSync('userOptions');
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			getOrderListFn(page, status = '') {
				const params = {
					page,
					status
				}
				getOrderList(params).then(res => {
					if (res.code == 0) {
						this.flag = false
						return
					} else {
						if (page > 1) {
							this.orderList = this.orderList.concat(res)
						} else {
							this.orderList = res
						}
					}
				})
			},
			scroll() {
				if (this.flag) {
					this.getOrderListFn(++this.page)
				}
			},
			setOrderStatus(status) {
				switch (status) {
					case 10:
						return '待付款';
					case 30:
						return '待使用';
					case 33:
						return '使用中';
					case 20:
						return '已取消';
					case 31:
						return '已使用';
					case 32:
						return '已過期';
					case 40:
						return '待退款';
					case 41:
						return '已退款';
				}
			},
			setBackground(status) {
				switch (status) {
					case 10:
						return '#39B19D';
					case 30:
						return '#39B19D';
					case 33:
						return '#ff914d';
					case 20:
						return '#39B19D';
					case 31:
						return '#39B19D';
					case 32:
						return '#39B19D';
					case 40:
						return '#39B19D';
					case 41:
						return '#39B19D';
				}
			},
			orderStartDate(time) {
				let a = time.split('~')[0].trim().split(' ')[0]
				let b = new Date(a).getDay()
				return this.setWeek(a, b)
			},
			orderStartTime(time) {
				return time.split('~')[0].trim().split(' ')[1]
			},
			orderEndDate(time) {
				let a = time.split('~')[1].trim().split(' ')[0]
				let b = new Date(a).getDay()
				return this.setWeek(a, b)
			},
			orderEndTime(time) {
				return time.split('~')[1].trim().split(' ')[1]
			},
			setWeek(date, week) {
				switch (week) {
					case 0:
						return date + '週日';
					case 1:
						return date + '週一';
					case 2:
						return date + '週二';
					case 3:
						return date + '週三';
					case 4:
						return date + '週四';
					case 5:
						return date + '週五';
					case 6:
						return date + '週六';
				}
			},
			orderDuration(time) {
				// if (this.osName == 'ios') {
				// 	time = time.replace(/-/g, '/')
				// }

				let start = time.split('~')[0]
				let end = time.split('~')[1]
				// console.log(start, end, '111111111')
				let a = new Date(end).getTime() - new Date(start).getTime()
				let h = Math.floor(a / 60 / 60 / 1000)
				let m = Math.floor((a % (60 * 60 * 1000) / 60 / 1000))
				if (m > 0) {
					return h + '小時' + m + '分鐘'
				} else {
					return h + '小時'
				}
			},
			openDelModal(item) {
				this.orderInfo = item
				this.showDelModal = true
			},
			confirmDel() {
				orderDel({
					order_id: this.orderInfo.id
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '訂單已刪除',
							icon: 'success'
						})
					}
					this.showDelModal = false
					return res
				}).then((res) => {
					if (res.code == 0) return
					this.getOrderListFn(1)
				})
			},
			openCancelModal(item) {
				this.orderInfo = item
				this.showCancelModal = true
			},
			confirmCancel() {
				cancelOrder({
					order_id: this.orderInfo.id
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '訂單已退款',
							icon: 'success'
						})
					}
					this.showCancelModal = false
					return res
				}).then((res) => {
					if (res.code == 0) return
					this.getOrderListFn(1)
				})
			},
			toDetails(id) {
				uni.navigateTo({
					url: `/pages/order/order_details?id=${id}`
				})
			},
			openPaymentPopup(item) {
				this.orderInfo = item
				this.showPaymentPopup = true

				this.radiovalue = this.paymentList[0].name

				getUserStoreInfo({
					store_id: this.orderInfo.store_id
				}).then(res => {
					this.userStoreInfo = res
				})

			},
			changePayment(e) {
				this.radiovalue = e
			},
			confirmPayment() {
				if (this.radiovalue == '餘額支付') {
					const params = {
						// room_id: this.orderInfo.room_id,
						pay_type: 6,
						order_id: this.orderInfo.id,
						// money: this.orderInfo.total_price,
						// date: this.setDate(this.orderInfo.date),
						// timeslot: this.orderInfo.timeslot,
					}
					if (this.userStoreInfo.balance < this.orderInfo.total_price) {
						uni.showToast({
							title: '餘額不足',
							icon: 'none',
							duration: 2000
						})
						return
					}
					orderPay(params).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 2000
							})
						}
						this.showPaymentPopup = false
						return res
					}).then(res => {
						if (res.code == 0) return
						this.getOrderListFn(1)
					})
				} else {
					const {
						order
					} = useStore()
					// const params = Object.assign({
					// 	money: order.getOrderObj.money
					// })
					order.setOrderObjState({
						money: this.orderInfo.total_price
					})
					this.showPaymentPopup = false
					uni.navigateTo({
						url: `/pages/pay/slotMachines/slotMachines?orderNo=${this.orderInfo.order_no}`
					})
				}
			},
			setDate(date) {
				let time = new Date(date * 1000)
				let y = time.getFullYear()
				let m = time.getMonth() + 1
				let d = time.getDate()
				return `${y}-${m}-${d}`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.img_box {
			// padding: 40rpx 40rpx 0;
			position: relative;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 30rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;
				z-index: 11;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 20rpx 40rpx 0;
			// text-align: center;
			color: #39B19D;

			.title {
				padding-bottom: 20rpx;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
			}

			.scroll_Y {
				height: 68vh;
				// background-color: skyblue;

				.order_item {
					margin-bottom: 20rpx;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;

					.top_image {
						display: flex;
						align-items: center;

						position: relative;

						.room_image {
							width: 140rpx;
							height: 140rpx;
							margin-right: 10rpx;

							::v-deep .u-image {
								width: 140rpx !important;
								height: 140rpx !important;
								border-radius: 20rpx !important;
							}

							::v-deep .u-image__image {
								width: 100% !important;
								height: 100% !important;
								border-radius: 20rpx !important;
							}

							::v-deep .u-image__loading {
								width: 100% !important;
								height: 100% !important;
								border-radius: 20rpx !important;
							}

							::v-deep .u-image__error {
								width: 100% !important;
								height: 100% !important;
								border-radius: 20rpx !important;
							}
						}

						.top_info {
							color: #000;

							.order_no {
								margin-top: 10rpx;
							}
						}

						.order_status {
							color: #fff;
							width: 130rpx;
							height: 50rpx;
							// background: #39B19D;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							top: 0;
							right: 0;
						}
					}

					.time {
						display: flex;
						margin-top: 10rpx;

						.time_box {
							text-align: center;

							&:nth-child(2) {
								margin: 0 30rpx;
							}

							view {
								color: #999;
								font-size: 26rpx;

								&:last-child {
									font-size: 30rpx;
									color: #000;
								}
							}
						}
					}

					.order_price,
					.create_time {
						color: #000;
						margin-top: 10rpx;
					}

					.operate_btn {
						margin-top: 20rpx;
						display: flex;
						justify-content: flex-end;

						.custom-style1,
						.custom-style2,
						.custom-style3,
						.custom-style4 {
							width: 160rpx;
							height: 60rpx;
							background-color: #ff914d;
							color: #fff;
							margin: 0;
							margin-left: 10rpx;
						}

						.custom-style2 {
							background-color: #fff;
							color: #39B19D;
							border: 1rpx solid #39B19D;
						}

						.custom-style3 {
							background-color: red;
							color: #fff;
						}

						.custom-style4 {
							background-color: #fff;
							color: #ff914d;
							border: 1rpx solid #ff914d;
						}
					}
				}
			}
		}
	}

	.payment_box {
		padding: 30rpx;

		.btns {
			display: flex;
			justify-content: space-around;
			margin: 30rpx 0;

			.custom-style1,
			.custom-style2 {
				margin: 0;
				width: 200rpx;
				height: 70rpx;
				font-size: 28rpx;
				background-color: #fff;
				color: #000;
				border: 1rpx solid #999;
			}

			.custom-style2 {
				background-color: #ff914d;
				color: #fff;
				border-color: #ff914d;
			}
		}
	}
</style>